<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>验证码</title>
  <style>
    body, html {
      height: 100%;
      margin: 0;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center;     /* 垂直居中 */
      background-color: #f0f0f0; /* 可选：设置背景颜色 */
    }

    #confirm {
      text-align: center; /* 确保内部元素也居中 */
      background-color: white; /* 可选：设置容器背景颜色 */
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    #inputCaptcha {
      height: 30px;
      vertical-align: middle;
      width: 150px; /* 设置输入框宽度 */
    }

    #verificationCodeImg {
      vertical-align: middle;
      cursor: pointer;
      margin-left: 10px;
    }

    #checkCaptcha {
      height: 40px;
      width: 100px;
      margin-top: 10px;
    }
  </style>
</head>

<body>
<div id="confirm">
  <h1>请输入下方验证码进行校验</h1>
  <input type="text" name="inputCaptcha" id="inputCaptcha">
  <img id="verificationCodeImg" src="/captcha/getCaptcha" alt="验证码图片" />
  <br/> <!-- 添加换行符以分开按钮 -->
  <input type="button" value="提交" id="checkCaptcha">
</div>

<script src="js/jquery.min.js"></script>
<script>
  $("#verificationCodeImg").click(function(){
    $(this).hide().attr('src', '/captcha/getCaptcha?dt=' + new Date().getTime()).fadeIn();
  });

  $("#checkCaptcha").click(function () {
    $.ajax({
      type: "post",
      url: "/captcha/check",
      data: {
        captcha: $("#inputCaptcha").val()
      },
      success: function(result){
        console.log( result)
        if(result.data == true){
          location.href = "blog_list.html";
        } else {
          alert("验证码错误");
        }
      }
    });
  });
</script>
</body>

</html>